import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import SwingColComponent from '@/components/SwingComponent/SwingColComponent';
import SwingItemComponent from '@/components/SwingComponent/SwingItemComponent';
import { Spin, Select, DatePicker, Empty } from 'antd';
const { Option } = Select;
import { map } from 'lodash';

//卡片展示样式及功能
const ItemCard = (props: any) => {
  const { item } = props;
  const { name } = item;

  return (
    <div className="cardView">
      <div className="cardItem">
        <div className="cardImg">
          <img style={{ width: '100%', height: '100%' }} src={''} />
        </div>
        <div className="cardInfo">
          <div>
            <div className="cardTitle">{name}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

/**
 * 目录文件
 * @param props
 * @returns
 */
const FileList = (props: any) => {
  const { dispatch, loading, res } = props;
  const cardLoading = loading.effects['enoadFiles/fetchResource'];

  useEffect(() => {
    dispatch({ type: 'enoadFiles/fetchResource', payload: {} });
  }, []);

  const renderCardList = () => {
    return map(res, (i, k) => {
      return <ItemCard key={k} item={i} />;
    });
  };

  return (
    <Spin spinning={cardLoading}>
      <div className={styles.taskWrapper}>{renderCardList()}</div>
    </Spin>
  );
};
export default connect(({ enoadFiles, loading }) => ({
  ...enoadFiles,
  loading,
}))(FileList);
